<template>
	<!-- :style="{ paddingTop: paddingTop }" -->
	<view class="poster-wapper">
		<view class="MaterialReviewOrder-nav">
			<!-- rgb="transparent" -->
			<DistributionNavBar leftColor="#000">
				<template slot="left">
					<image src="@/static/images/user/icon_dl_syb.png" @click="clickBack" />
				</template>
			</DistributionNavBar>
		</view>
		<view class="grade-line-bg">
			<image src="https://dyfxmp-pre.lianlianlvyou.com/avatar/original/LL_IMAGE_0a47638149524e13be6e95dcdd8e5e07.jpg" />
		</view>
		<view class="flex-box" :style="{ paddingTop: agentNum ? paddingTopHalf : 0 }">
			<view @click="toAgentList" :style="{ top: paddingTop }" class="poster-wapper-agent flex row-between col-center" v-if="agentNum">
				<view class="flex col-center">
					<view class="head-image">
						<image :src="agentInfo.headUrl" />
					</view>
					<text class="head-name">{{ agentInfo.nickName || '' }}</text>
				</view>
				<view class="flex col-center">
					<text class="success-peo">已成功拓展{{ agentNum || 0 }}人</text>
					<view class="to-agent flex col-center row-center"><image src="@/static/images/third/icon_sq_right@2x.png" /></view>
				</view>
			</view>
			<view class="poster-wapper-painter">
				<limePainter
					ref="limePainter"
					:quality="3"
					isCanvasToTempFilePath
					@success="getSuccesss"
					class="lime-painter"
					:board="poster"
				></limePainter>
			</view>
		</view>
		<view class="share-box">
			<button open-type="share" class="share-box-item">
				<view class="icon-image">
					<image src="@/static/images/user/icon_expand_friends@2x.png" />
				</view>
				<view class="share-text">微信好友</view>
			</button>
			<view class="share-box-item" @click="saveImage">
				<view class="icon-image">
					<image src="@/static/images/user/icon_expand_save@2x.png" />
				</view>
				<view class="share-text">保存图片</view>
			</view>
		</view>
		<!-- <view class="single-btn" @click="saveImage">
			<view class="share-text">保存图片</view>
		</view> -->
	</view>
</template>

<script>
import srorageKey from '@/utils/srorage/key';
import { defaultImageUrl, getLocal, getSystemInfo } from '@/utils';
import limePainter from '@/uni_modules/lime-painter/components/l-painter/l-painter.vue';
import DistributionNavBar from '@/components/distributionNavBar/indeHome';
const bankIcon = Object.freeze(`${defaultImageUrl}help/icon_navbar_back.png`);
import { mapGetters } from 'vuex';
const { platform, statusBarHeight, pixelRatio = 2 } = getSystemInfo();
import { agentNumUrl } from '@/api/third';

export default {
	name: 'developTalent',
	components: {
		limePainter,
		DistributionNavBar
	},
	data() {
		return {
			agentInfo: {
				codeImage: '',
				headUrl: '',
				nickName: ''
			},
			selfAuserId: '',
			agentNum: 0
		};
	},

	computed: {
		...mapGetters(['userInfo']),
		paddingTop() {
			return `${statusBarHeight + (platform === 'ios' ? 44 : 48)}px`;
		},
		paddingTopHalf() {
			const computeTop = `${statusBarHeight + (platform === 'ios' ? 44 : 48)}`;
			return computeTop / 2 + 'px';
		},
		poster() {
			const { agentInfo } = this;
			// const widHei3 = {width:'413rpx',height:'694rpx'}
			// const widHei2 = {width:'531rpx',height:'892rpx'}
			// let widHei = pixelRatio === 3 ? widHei3 : widHei2
			// 590 992
			return {
				css: {
					width: '531rpx',
					overflow: 'hidden',
					position: 'relative',
					boxSizing: 'border-box',
					zIndex: '3'
				},
				views: [
					{
						css: {
							width: '531rpx',
							height: '892rpx',
							position: 'relative',
							borderRadius: '22rpx'
						},
						views: [
							{
								src: `${defaultImageUrl}image/img_new_haibao.png`,
								type: 'image',
								css: {
									objectFit: 'fill',
									objectPosition: 'center',
									width: '531rpx',
									height: '892rpx'
									// borderRadius: '22rpx'
								}
							},
							{
								css: {
									position: 'absolute',
									bottom: '52rpx',
									left: '43rpx',
									height: '90rpx',
									padding: '18rpx',
									width: '414rpx',
									display: 'flex',
									justifyContent: 'space-between'
								},
								views: [
									// 头像信息
									{
										type: 'view',
										css: {
											width: '414rpx',
											display: 'flex',
											position: 'relative'
										},
										views: [
											{
												type: 'view',
												css: {
													width: '414rpx',
													display: 'flex'
												},
												views: [
													// 头像image
													{
														src: agentInfo.headUrl || '',
														type: 'image',
														css: {
															background: '#fff',
															objectFit: 'cover',
															width: '54rpx',
															border: '2rpx solid #fff',
															boxSizing: 'border-box',
															height: '54rpx',
															borderRadius: '50%',
															display: 'inline-block'
														}
													},
													// 头像旁文案
													{
														type: 'view',
														css: {
															paddingLeft: '18rpx',
															display: 'inline-block'
														},
														views: [
															{
																text: '吃喝玩乐不可辜负，轻松赚钱快乐不断，快来一起实现吧！',
																type: 'text',
																css: {
																	display: 'inline-block',
																	color: '#000',
																	fontSize: '18rpx',
																	fontWeight: 'bold',
																	width: '243rpx'
																}
															}
														]
													}
												]
											}
										]
									},
									// 二维码
									{
										type: 'image',
										src: agentInfo.codeImage || '',
										css: {
											width: '95rpx',
											height: '95rpx',
											borderRadius: '10rpx',
											background: 'rgba(252,203,59,0.34)'
										}
									},
									{
										type: 'text',
										css: {
											width: '261rpx',
											position: 'absolute',
											// background: '#f00',
											bottom: '18rpx',
											left: '27rpx',
											fontSize: '9px',
											color: '#999999',
											fontWeight: '400',
											textAlign: 'right'
										},
										text: '- ' + agentInfo.nickName || ''
									}
								],
								type: 'view'
							}
						],
						type: 'view'
					}
				]
			};
		}
	},

	onLoad(options = {}) {
		const { codeImage = '', aUserId = '' } = options;
		let deImg = decodeURIComponent(codeImage);
		const { headUrl = '', nickName = '' } = this.userInfo || getLocal(srorageKey.userInfo) || {};
		this.$set(this, 'agentInfo', { codeImage: deImg, headUrl, nickName });
		this.selfAuserId = aUserId;
		console.log(this.agentInfo);
		uni.showLoading({
			title: '加载中…',
			mask: true
		});
		this.getAgentNum();
	},
	methods: {
		async getAgentNum(params) {
			let result = await agentNumUrl({ operateId: params || this.selfAuserId });
			console.log(result);
			const { code = 0, data = 0 } = result;
			if (code !== 200) {
				this.agentNum = 0;
				return;
			}
			this.agentNum = data;
		},
		getSuccesss($event) {
			console.log($event);
			this.posterImg = $event;
			uni.hideLoading();
		},
		toAgentList() {
			const { selfAuserId = '' } = this;
			if (!selfAuserId) {
				uni.showToast({
					title: '达运ID不存在',
					icon: 'none'
				});
				return;
			}
			uni.navigateTo({
				url: `/thirdManage/agentHost?operateId=${selfAuserId}`
			});
		},
		// initImage() {
		// 	// 渲染
		// 	this.$refs.limePainter.render(this.poster);
		// 	// 生成图片
		// 	console.log(111, this.$refs.limePainter);
		// 	this.$refs.limePainter.canvasToTempFilePathSync({
		// 		fileType: 'jpg',
		// 		// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
		// 		pathType: 'url',
		// 		quality: 1,
		// 		success: (res) => {
		// 			console.log(res.tempFilePath);
		// 			this.posterImg = res.tempFilePath;
		// 		}
		// 	});
		// },
		saveImage() {
			if (this.posterImg) {
				// 非H5 保存到相册
				const self = this;
				console.log(self.posterImg);
				let systemInfo = uni.getSystemInfoSync() || {};

				uni.saveImageToPhotosAlbum({
					filePath: self.posterImg,
					success: function () {
						console.log('save success');
						if (systemInfo.platform === 'ios') {
							uni.showToast({
								title: '保存成功'
							});
						}
					},
					fail: function (err) {
						console.log(err);
					}
				});
			} else {
				uni.showToast({
					title: '请退出重试',
					icon: 'none'
				});
			}
		},
		clickBack() {
			uni.navigateBack();
		}
	},
	onShareAppMessage() {
		let shareObj;
		shareObj = {
			title: '欢迎大咖一起加入联联探客',
			path: `authorizePage/invitatAuth?aUserId=${this.selfAuserId}`,
			success() {
				console.log('转发发布器已调起');
			},
			fail() {
				console.log('转发发布器调起失败');
			}
		};
		return shareObj;
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.poster-wapper {
	min-height: 100vh;
	height: 100vh;
	overflow-x: hidden;
	overflow-y: hidden; // scroll
	background: #f6f6f6;
	width: 100%;
	@include Db_iosBottomDistance(0rpx);
	position: relative;
	&-agent {
		background: rgba(255, 255, 255, 0.5);
		border-radius: 24rpx;
		border: 1px solid #ffe2d2;
		// backdrop-filter: blur(2px);
		box-shadow: 0 0 3rpx #ffe2d2;
		padding: 19rpx 0 19rpx 24rpx;
		position: fixed;
		top: 156rpx;
		left: 28rpx;
		z-index: 99999;
		width: calc(100% - 56rpx);
		.head-image {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.head-name {
			font-size: 12px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 8rpx;
		}
		.success-peo {
			font-size: 12px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #ff6b11;
			margin-right: 8rpx;
		}
		.to-agent {
			width: 32rpx;
			height: 32rpx;
			background: #ff6b11;
			border-radius: 8rpx 0px 0px 8rpx;
			image {
				width: 70%;
				height: 70%;
				display: block;
			}
		}
	}
	&-painter {
		width: 531rpx; // 0.9
		height: 892rpx;
		z-index: 3;
		// background: #ffdba3;
		box-shadow: 0px 4px 30px -6px rgba(143, 145, 150, 0.5);
		border-radius: 12px;
		// 496 - 120
		// margin: 0 auto 0;
		overflow: hidden;
		.lime-painter {
			// border-radius: 12px;
			overflow: hidden;
		}
	}
	button {
		background: #ffffff;
		border: none;
	}
	button::after {
		border: none;
	}
	.share-box {
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 28rpx 100rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 0px 0px;
		z-index: 3;
		@include Db_iosBottomDistance(28rpx);
		&-item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;
			margin: auto;
			.icon-image {
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.share-text {
				font-size: 12px;
				font-weight: 400;
				color: #333333;
				height: 30px;
				line-height: 30px;
			}
		}
	}
}
// .poster-wapper::before
.grade-line-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 600rpx;
	// https://dyfxmp-pre.lianlianlvyou.com/avatar/original/LL_IMAGE_e6b087d2ad05499fa8cc429683ea48b4.png
	// background: url(https://dyfxmp-pre.lianlianlvyou.com/avatar/original/LL_IMAGE_0a47638149524e13be6e95dcdd8e5e07.jpg);
	background-size: 100% 100%;
	z-index: 0;
	image {
		width: 100%;
		height: 100%;
	}
}
.single-btn {
	@include Db_iosBottomDistance(80rpx);
	height: 120rpx;
	line-height: 120rpx;
	background: #ffb359;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	border-radius: 20px 20px 0px 0px;
	z-index: 3;
	text-align: center;
	font-size: 14px;
	color: #ffffff;
	z-index: 999999;
}
.layout-header--image {
	width: 40rpx;
	height: 40rpx;
	display: block;
}
.MaterialReviewOrder-nav {
	margin: 0 -20rpx;

	image {
		width: 40rpx;
		height: 40rpx;
	}
}
.flex-box {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 280rpx;
	z-index: 10;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 280rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 280rpx);
}
</style>
